<template>
    <el-card>
        <div class="title-bar" style="height: 40px;display: flex;justify-content: space-between;">
            <div style="height: 40px;">
                <div></div>
                <span>居民详情</span>
            </div>
            <el-button type="success" style="height: 40px;font-size: 14px;">发消息</el-button>
        </div>
        <div class="head-bar">
            <div v-for="item in headData" :key="item.id" :class="{ 'active-title': nowTitle == item.id }"
                @click="nowTitle = item.id">
                {{ item.name }}
            </div>
        </div>
        <div class="message-bar">

            <span>居民信息</span>
            <el-descriptions :column="4" style="--el-text-color-primary:#999999" label-width="80px">
                <el-descriptions-item label="居民编号">{{ residentData._id }}</el-descriptions-item>
                <el-descriptions-item label="姓名">{{ residentData.name }}</el-descriptions-item>
                <el-descriptions-item label="头像">
                    <img :src="residentData.avatar" alt="" style="width: 32px;height: 32px;">
                </el-descriptions-item>
                <el-descriptions-item label="身份证号">{{ residentData.IDnumber }}</el-descriptions-item>
                <el-descriptions-item label="手机号码">
                    {{ residentData.phone }}
                </el-descriptions-item>
                <el-descriptions-item label="现居地">
                    {{ residentData.address }}
                </el-descriptions-item>
                <el-descriptions-item label="登录密码">
                    {{ residentData.password }}
                </el-descriptions-item>
                <el-descriptions-item label="行政区划">
                    {{ residentData.administrativeRegion }}
                </el-descriptions-item>
                <el-descriptions-item label="居民标签">
                    <div class="tag-bar">
                        <el-tag type="danger" effect="light" round>
                            高血压
                        </el-tag>
                        <el-tag type="primary" effect="light" round>
                            冠心病
                        </el-tag>
                        <el-tag type="warning" effect="light" round>
                            高血糖
                        </el-tag>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="性别">{{ residentData.gender ? '男' : '女' }}</el-descriptions-item>
                <el-descriptions-item label="出生日期">{{ residentData.birthday }}</el-descriptions-item>
                <el-descriptions-item label="籍贯">{{ residentData.origin }}</el-descriptions-item>
                <el-descriptions-item label="民族">{{ residentData.nation }}</el-descriptions-item>
                <el-descriptions-item label="文化程度">{{ residentData.culture }}</el-descriptions-item>
                <el-descriptions-item label="婚姻状况">{{ residentData.maritalStatus }}</el-descriptions-item>
                <el-descriptions-item label="职业">{{ residentData.profession }}</el-descriptions-item>
                <el-descriptions-item label="工作单位">{{ residentData.workUnit }}</el-descriptions-item>
                <el-descriptions-item label="紧急联系人">无</el-descriptions-item>
                <el-descriptions-item label="联系人电话">无</el-descriptions-item>
                <el-descriptions-item label="户籍类型">{{ residentData.domicileType }}</el-descriptions-item>
                <el-descriptions-item label="费用类型">{{ residentData.costType }}</el-descriptions-item>
                <el-descriptions-item label="定点医疗单位">{{ residentData.hospital }}</el-descriptions-item>
                <el-descriptions-item label="来源">用户注册</el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="message-bar">

            <span>健康信息</span>
            <el-descriptions :column="4" style="--el-text-color-primary:#999999" label-width="80px">
                <el-descriptions-item label="身高">{{ residentData.height ? residentData.height
                    + 'cm' : '' }}</el-descriptions-item>
                <el-descriptions-item label="体重">{{ residentData.weight ? residentData.weight
                    + 'kg' : '' }}</el-descriptions-item>
                <el-descriptions-item label="血型">{{ residentData.bloodType }}</el-descriptions-item>
                <el-descriptions-item label="RH阴性">
                    <span v-if="residentData.RH == 0">
                        否
                    </span>
                    <span v-if="residentData.RH == 1">
                        是
                    </span>
                    <span v-if="residentData.RH == 2">
                        不详
                    </span>
                </el-descriptions-item>
                <el-descriptions-item label="过敏史">{{ residentData.allergy ? '有' : '否' }}</el-descriptions-item>
                <el-descriptions-item label="既往史">{{ residentData.pastMedical ? '有' : '否' }}</el-descriptions-item>
                <el-descriptions-item label="就诊史">{{ residentData.outpatients ? '有' : '否' }}</el-descriptions-item>
                <el-descriptions-item label="家族病史">{{ residentData.familyMedical ? '有' : '否' }}</el-descriptions-item>
            </el-descriptions>
        </div>

        <div class="message-bar">
            <span>家庭成员</span>
            <div class="relation-bar">
                <div class="relation-box" v-for="item in relationData">
                    <img :src="item.otherId.avatar" alt="">
                    <div class="relation-message">
                        <div>
                            <p class="nameBar">{{ item.otherId.name }}</p>
                            <span> 26岁 </span>
                            <img style="width: 12px;height: 12px;" src="/src/assets/girls.png" alt=""
                                v-if="!item.otherId.gender">
                            <img src="/src/assets/boys.png" alt="" v-else>
                        </div>
                        <span>{{ '关系：' + item.relationship }}</span>
                    </div>
                </div>
            </div>

        </div>

        <div class="button-bar">
            <el-button type="primary" @click="toUpdate" permission="编辑居民档案">编辑档案信息</el-button>
            <el-button @click="$router.back">返回</el-button>
        </div>

    </el-card>

</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { findResidentRelationApi, getREsidentDetailApi } from '../../api/resident';
import { useRouter } from 'vue-router';

const route = useRoute()
const router = useRouter()

const residentData = ref({})

// 当前标题
const nowTitle = ref(1)

const headData = ref([
    { id: 1, name: '健康档案' },
    { id: 2, name: '健康记录' },
    { id: 3, name: '签约信息' },
    { id: 4, name: '服务记录' },
])

// 获取详情
function getResident() {
    getREsidentDetailApi({ _id: route.params._id })
        .then(res => {
            if (res.code == 200) {
                residentData.value = res.data
            }
        })
}

onMounted(() => {
    getResident()
    getRelation()
})

const relationData = ref([])

// 获取亲属关系
function getRelation() {
    findResidentRelationApi({ ownId: route.params._id })
        .then(res => {
            if (res.code == 200) {
                relationData.value = res.data
            }
        })
}


// 跳转修改页
function toUpdate() {
    router.push('/resident/update/' + residentData.value._id)
}

</script>

<style scoped>
.title-bar {
    height: 40px;
}

.title-bar .el-tag {
    margin-bottom: 0;
    color: #fff;
}

.tag-bar .el-tag:not(:last-child) {
    margin-right: 5px;
}

.title-bar>div {
    height: 20px;
    display: flex;
    align-items: center;
}

.title-bar>div>div {
    height: 20px;
    background-color: var(--el-color-primary);
    width: 6px;
    border-radius: 16px;
    margin-right: 15px;
}




.title-bar span {
    color: var(--el-title-font-color);
    font-size: var(--el-title-font-size);
    font-weight: var(--el-title-font-weight);
}



.message-bar>span {
    display: inline-block;
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
}

.message-bar {
    border-bottom: 1px solid #dbdbdb;
    margin-top: 20px;
}

.el-form-item div {
    height: 40px;
    width: 200px;
    line-height: 40px;
    font-size: 13px;
    color: #333;
}

.el-input,
.el-select {
    width: 200px;
    height: 40px;
}

.el-form-item {
    margin-right: 100px;
    margin-bottom: 15px;
}

.tag-bar {
    width: 120px;
    display: inline-block;
    display: flex;
    align-items: center;

}

.button-bar {
    height: 40px;
    display: flex;
    justify-content: flex-start;
    margin-top: 20px;
    margin-bottom: 20px;
}

.head-bar {
    height: 48px;
    background-color: rgba(242, 247, 251, 0.498039215686275);
    display: flex;
    margin: 10px 0;
}

.head-bar>div {
    width: 125px;
    height: 48px;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

.head-bar .active-title {
    background-color: var(--el-color-primary);
    color: #fff;
}
</style>
<style>
.el-descriptions .el-descriptions__label {
    line-height: 40px;
    display: inline-block;
    height: 40px;
    text-align: right !important;
}

.el-descriptions .el-descriptions__content {

    display: inline-block;
}

.el-descriptions__body .el-descriptions__table .el-descriptions__cell {
    font-size: 13px;

}

.relation-bar {
    display: grid;
    grid-template-columns: repeat(5, 200px);
    justify-content: space-between;
    padding-right: 20px;
}

.relation-box {
    width: 200px;
    height: 84px;
    border-radius: 8px;
    border: 1px solid rgba(242, 242, 242, 1);
    display: flex;
    padding-top: 25px;
    padding-left: 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.relation-box img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

.relation-message>div {
    display: inline-block;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.relation-message>div>p {
    font-size: 16px;
    color: #333;
    margin: 0;
    margin-right: 6px;
    line-height: 16px;
}

.relation-message>div>span,
.relation-message span {
    font-size: 12px;
    color: #999;
    margin-right: 20px;
    line-height: 12px;
}

.relation-message>div>img {
    width: 15px;
    height: 15px;
}

.nameBar {
    display: inline-block;
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 隐藏超出部分 */
    text-overflow: ellipsis;
    /* 超出部分显示为省略号 */
    max-width: 50px;
}
</style>
